<template>
    <div class="addGateway">
        <div class="banner">
            <div class="flexItem">
                <span>{{message}}</span>
            </div>
        </div>
        <div class="link" id="link" name="link" >{{this.link}}</div>
        <!--<div class="buttonList" v-for="(item,index) in items">
            <div class="flex">
                <div id="btn" class="flexItem" :data-clipboard-text="link">{{item.name}}</div>
            </div>
        </div>-->
        <div class="buttonList">
            <div class="flex" v-for="(item,index) in items">
                <div id="btn" class="flexItem" @click="click()">{{item.name}}</div>
            </div>
        </div>
        <van-popup v-model="show" position="top"><img style="width: 80vw; " src="../../assets/live_weixin.png"/></van-popup>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import {post} from "../../js/utils";
    //import clipboard from 'clipboard';
    import { Toast,Popup } from 'vant';
    import qs from 'qs';

    export default {
        name: 'AddGatewayStep2',
        computed: {
            ...mapState(["userId"]),
        },
        components: {
            vanPopup: Popup
        },
        data () {
            return {
                show: false,
                link: '',
                items: [{name: '下一步'}],
                message: '请打开外部浏览器，然后连接aptenon开头的WIFI热点',  //默认在微信内置浏览器
                click: this.showPopup, //默认在微信内置浏览器
                lastClickTime: new Date().getTime()-1000, //上次点击时间
                min_click_delay_time: 5000,  //每隔多长时间点击一次
            }
        },
        created () {
            //this.getWxUserIdForGatewayBind()
            //new clipboard('#btn');
            let viewer = window.navigator.userAgent.toLowerCase();
            if(viewer.match(/MicroMessenger/i) == 'micromessenger'){
                this.showPopup()
            }else{
                this.message = '连接aptenon开头的WIFI热点，WIFI密码为空',
                this.click =  this.showTips
                //刚进来时不主动跳转，只有用户点击下一步时才跳转
                //window.location.href = decodeURIComponent(qs.parse(window.location.href.split("#")[0].split("?")[1]).link)
            }
        },
        methods: {
            onGeneralClick: function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            },
            getWxUserIdForGatewayBind: function(){
                post("/user/GetWxUserIdForGatewayBind",{
                    userId:this.userId,
                }).then(
                    ret=>{
                        this.link='http://192.168.1.100/?wxUserId='+ret.userId;
                    }
                )
            },
            showPopup: function (){
                this.show = true;
            },
            showTips: function (){
                let curClickTime = new Date().getTime()
                if ((curClickTime - this.lastClickTime) >= this.min_click_delay_time) {
                    this.lastClickTime = curClickTime;
                    window.location.href = decodeURIComponent(qs.parse(window.location.href.split("#")[0].split("?")[1]).link)
                }else{
                    Toast("操作太频繁了！！！")
                }

            }


        }
    }
</script>

<style scoped>

    .addGateway > .van-popup{
        background-color: rgba(0,0,0,0);
    }

    /*密码输入框*/
    .addGateway > .password {
        width: 92%;
        margin-left: 4vw;
        margin-top: 20px;
    }

    .addGateway > .banner {
        width: 100vw;
        min-height: 50vh;
        background: url(../../assets/addGateway_01.png) no-repeat center top;
        background-size: 100% 100%;
        display: flex;
        justify-content: start;
    }

    .addGateway > .banner > .flexItem {
        align-self: flex-end;
        margin: 3.4vh;
    }

    /**
    按钮列表
     */
    .addGateway > .buttonList {
        width: 100vw;
        height: 50vh;
        display: flex;
        justify-content: center;
        line-height: 10vh;
    }

    .addGateway > .buttonList > .flex {
        width: 100vw;
        display: flex;
        justify-content: center;
        line-height: 10vh;

    }

    .addGateway > .buttonList > .flex > .flexItem {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }
</style>
